<template>
    <div>
        <a-form-model :model="form" layout="inline">
            <a-form-model-item label="标题">
                <a-input v-model="form.text" />
            </a-form-model-item>
            <a-form-model-item label="来源">
                <a-select v-model="form.source">
                    <a-select-option value="all">全部</a-select-option>
                    <a-select-option value="online">线上</a-select-option>
                    <a-select-option value="offline">线下</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="状态">
                <a-select v-model="form.status" style="width: 6em;">
                    <a-select-option value="all">全部</a-select-option>
                    <a-select-option value="0">未办理</a-select-option>
                    <a-select-option value="1">已办理</a-select-option>
                    <a-select-option value="2">已回访</a-select-option>
                    <a-select-option value="3">已结束</a-select-option>
                    <a-select-option value="4">已备案</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="报事人">
                <a-input v-model="form.reporter" />
            </a-form-model-item>
            <a-form-model-item label="日期">
                <a-range-picker v-model="form.date" />
            </a-form-model-item>
            <a-form-model-item>
                <a-button>重置</a-button>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" :loading="queryLoading" @click="query">查询</a-button>
            </a-form-model-item>
        </a-form-model>
        <a-button type="link" @click="showAddAffair"><a-icon type="plus" />添加</a-button>
        <a-table :loading="spinning" :columns="columns" :data-source="data" :row-selection="{ selectedRowKeys, onChange }" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">
            <span slot="status" slot-scope="status">
                <a-badge v-if="status === 0" status="processing" text="未办理" />
                <a-badge v-else-if="status === 1" status="processing" text="已办理" />
                <a-badge v-else-if="status === 2" status="processing" text="已回访" />
                <a-badge v-else-if="status === 3" status="success" text="已结束" />
                <a-badge v-else-if="status === 4" status="success" text="已备案" />
            </span>
            <span slot="affairDate" slot-scope="date">{{date.getFullYear()}}-{{date.getMonth()+1}}-{{date.getDate()}}</span>
            <span slot="handleDate" slot-scope="date" v-if="typeof date === 'object'">{{date.getFullYear()}}-{{date.getMonth()+1}}-{{date.getDate()}}</span>
            <span slot="returnVisitDate" slot-scope="date" v-if="typeof date === 'object'">{{date.getFullYear()}}-{{date.getMonth()+1}}-{{date.getDate()}}</span>
            <a-rate slot="rate" slot-scope="rate" v-if="typeof rate === 'number'" :default-value="rate" disabled />
            <span slot="operation" slot-scope="_, record, index">
                <a-button type="link" @click="showAffair(index)">查看</a-button>
                <a-button v-if="record.status === 0" type="link" @click="showAddAffair">编辑</a-button>
                <a-button v-if="record.status === 3" type="link" @click="deleteAffair">备案</a-button>
                <a-button type="link" @click="deleteAffair">删除</a-button>
            </span>
        </a-table>
        <a-modal v-model="showAdd" title="添加报事" :confirm-loading="addConfirmLoading" @ok="addAffair">
            <a-form-model :model="newAffair">
                <a-form-model-item label="标题">
                    <a-input v-model="newAffair.text" />
                </a-form-model-item>
                <a-form-model-item label="报事人">
                    <a-input v-model="newAffair.reporter" />
                </a-form-model-item>
                <a-form-model-item label="日期">
                    <a-date-picker v-model="newAffair.date" />
                </a-form-model-item>
                <a-form-model-item label="来源">
                    <a-select v-model="newAffair.source">
                        <a-select-option value="all">全部</a-select-option>
                        <a-select-option value="online">线上</a-select-option>
                        <a-select-option value="offline">线下</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="办事人">
                    <a-button type="link" @click="showAddObject">选择办事人</a-button>
                </a-form-model-item>
                <a-form-model-item label="描述">
                    <a-input v-model="newAffair.description" />
                </a-form-model-item>
                <a-form-model-item label="报事附图">
                    <a-upload v-model="newAffair.fileList" list-type="picture-card">
                        <div>
                            <a-icon type="plus" />
                            <div class="ant-upload-text">Upload</div>
                        </div>
                    </a-upload>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-modal v-model="showObjects" title="选择办事人" :footer="null" :after-close="showAddAffair">
            <a-table :columns="objectColumns" :data-source="objectData" :row-selection="{ objectSelectedRowKeys, onObjectChange, type: 'radio' }" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">

            </a-table>
        </a-modal>
        <a-modal v-model="showDetail" title="办事" :footer="null" width="3000">
            <div>标题：{{detail.text}}</div>
            <div>报事人：{{detail.reporter}}</div>
            <div>日期：{{detail.affairDate.getFullYear()}}-{{detail.affairDate.getMonth()+1}}-{{detail.affairDate.getDate()}}</div>
            <div>来源：{{detail.source}}</div>
            <div>办事人：{{detail.handler}}</div>
            <div>描述：{{detail.affairDescription}}</div>
            <div v-if="detail.fileList.length > 0">
                <div>报事附图：</div>
                <div><a-upload :disabled="true" :default-file-list="detail.fileList" /></div>
            </div>
            <a-divider />
            <div>报事办理：</div>
            <a-table :columns="handleColumns" :data-source="detail.handle" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">
                <a-upload slot="fileList" slot-scope="fileList" :default-file-list="fileList" :disabled="true" list-type="picture-card" />
                <a-badge slot="status" slot-scope="status" v-if="status" status="success" text="已完成" />
                <a-badge slot="status" v-else status="processing" text="未完成" />
                <div slot="date" slot-scope="date">{{date.getFullYear()}}-{{date.getMonth()+1}}-{{date.getDate()}}</div>
            </a-table>
            <a-divider />
            <div v-if="typeof detail.returnVisitDate === 'object'">回访日期：{{detail.returnVisitDate.getFullYear()}}-{{detail.returnVisitDate.getMonth()+1}}-{{detail.returnVisitDate.getDate()}}</div>
            <div v-if="typeof detail.rate === 'number'">回访评价：<a-rate :default-value="detail.rate" :disabled="true" /></div>
            <div v-if="typeof detail.returnVisitDescription === 'string'">回访描述：{{detail.returnVisitDescription}}</div>
            <div v-if="typeof detail.returnVisitFileList === 'object' && detail.returnVisitFileList.length > 0">
                <div>回访附图：</div>
                <div><a-upload :disabled="true" :default-file-list="detail.returnVisitFileList" /></div>
            </div>
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "AffairHandle",
        data: () => ({
            form: {
                text: '',
                source: 'all',
                status: 'all',
                reporter: '',
                date: null,
            },
            detail: {
                source: '线上',
                text: '测试报事',
                reporter: '我',
                affairDate: new Date(),
                affairDescription: '测试描述',
                handler: '超级管理员',
                fileList: [
                    {
                        uid: 1,
                        name: 'favicon.ico',
                        status: 'done',
                        url: '/favicon.ico',
                    },
                    {
                        uid: 2,
                        name: 'index.html',
                        status: 'done',
                        url: '/index.html',
                    },
                ],
                returnVisitDate: new Date(),
                rate: 4,
                returnVisitDescription: '非常棒',
                returnVisitFileList: [
                    {
                        uid: 3,
                        name: 'favicon.ico',
                        status: 'done',
                        url: '/favicon.ico',
                    },
                    {
                        uid: 4,
                        name: 'index.html',
                        status: 'done',
                        url: '/index.html',
                    },
                ],
                handle: [
                    {
                        key: 1,
                        fileList: [{
                            uid: 5,
                            name: 'logo.png',
                            status: 'done',
                            url: '/logo.png',
                        }],
                        status: false,
                        forward: '市委',
                        description: '第一步',
                        handler: '区委',
                        date: new Date(2020, 8, 1),
                    },
                    {
                        key: 2,
                        fileList: [],
                        status: false,
                        forward: '省委',
                        description: '第二步',
                        handler: '市委',
                        date: new Date(2020, 8, 2),
                    },
                    {
                        key: 3,
                        fileList: [{
                            uid: 6,
                            name: 'logo.png',
                            status: 'done',
                            url: '/logo.png',
                        }],
                        status: true,
                        forward: '中央',
                        description: '第三步',
                        handler: '省委',
                        date: new Date(2020, 8, 3),
                    }
                ],
            },
            queryLoading: false,
            spinning: false,
            selectedRowKeys: [],
            objectSelectedRowKeys: [],
            showAdd: false,
            addConfirmLoading: false,
            newAffair: {
                text: '',
                reporter: '',
                date: null,
                source: 'online',
                description: '',
                fileList: [],
            },
            showObjects: false,
            showDetail: false,
            objectColumns: [
                {
                    title: '部门名称',
                    dataIndex: 'department',
                    key: 'department',
                },
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '电话',
                    dataIndex: 'phone',
                    key: 'phone',
                },
                {
                    title: '职务',
                    dataIndex: 'vocation',
                    key: 'vocation',
                },
            ],
            objectData: [
                {
                    key: 1,
                    department: '清洁部',
                    name: '杨明山',
                    phone: '13798044832',
                    vocation: '清洁主管',
                },
                {
                    key: 2,
                    department: '清洁部',
                    name: '蒋从运',
                    phone: '13286828931',
                    vocation: '保洁员',
                },
                {
                    key: 3,
                    department: '仓管部',
                    name: '李美园',
                    phone: '13538791503',
                    vocation: '仓管员',
                },
                {
                    key: 4,
                    department: '保安部',
                    name: '乔荣崇',
                    phone: '13724872453',
                    vocation: '副总经理',
                },
            ],
            columns: [
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    scopedSlots: { customRender: 'status' }
                },
                {
                    title: '来源',
                    dataIndex: 'source',
                    key: 'source',
                },
                {
                    title: '标题',
                    dataIndex: 'text',
                    key: 'text',
                },
                {
                    title: '报事人',
                    dataIndex: 'reporter',
                    key: 'reporter',
                },
                {
                    title: '报事日期',
                    dataIndex: 'affairDate',
                    key: 'affairDate',
                    scopedSlots: { customRender: 'affairDate' },
                },
                {
                    title: '报事描述',
                    dataIndex: 'affairDescription',
                    key: 'affairDescription',
                },
                {
                    title: '办理人',
                    dataIndex: 'handler',
                    key: 'handler',
                },
                {
                    title: '办理日期',
                    dataIndex: 'handleDate',
                    key: 'handleDate',
                    scopedSlots: { customRender: 'handleDate' },
                },
                {
                    title: '办理结果',
                    dataIndex: 'result',
                    key: 'result',
                },
                {
                    title: '回访日期',
                    dataIndex: 'returnVisitDate',
                    key: 'returnVisitDate',
                    scopedSlots: { customRender: 'returnVisitDate' },
                },
                {
                    title: '回访评价',
                    dataIndex: 'rate',
                    key: 'rate',
                    scopedSlots: { customRender: 'rate' },
                },
                {
                    title: '操作',
                    key: 'operation',
                    scopedSlots: { customRender: 'operation' },
                },
            ],
            handleColumns: [
                {
                    title: '附图',
                    dataIndex: 'fileList',
                    key: 'fileList',
                    scopedSlots: { customRender: 'fileList' },
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    scopedSlots: { customRender: 'status' },
                },
                {
                    title: '转办',
                    dataIndex: 'forward',
                    key: 'forward',
                },
                {
                    title: '描述',
                    dataIndex: 'description',
                    key: 'description',
                },
                {
                    title: '办理人',
                    dataIndex: 'handler',
                    key: 'handler',
                },
                {
                    title: '日期',
                    dataIndex: 'date',
                    key: 'date',
                    scopedSlots: { customRender: 'date' },
                }
            ],
            data: [
                {
                    key: 1,
                    status: 0,
                    source: '线上',
                    text: '测试报事',
                    reporter: '我',
                    affairDate: new Date(),
                    affairDescription: '测试描述',
                    handler: '超级管理员',
                    fileList: [
                        {
                            uid: 7,
                            name: 'favicon.ico',
                            status: 'done',
                            url: '/favicon.ico',
                        },
                    ],
                },
                {
                    key: 2,
                    status: 1,
                    source: '线上',
                    text: '测试报事',
                    reporter: '我',
                    affairDate: new Date(),
                    affairDescription: '测试描述',
                    handler: '超级管理员',
                    handleDate: new Date(),
                    result: '测试结果',
                    fileList: [
                        {
                            uid: 8,
                            name: 'index.html',
                            status: 'done',
                            url: '/index.html',
                        },
                    ],
                    handle: [
                        {
                            key: 1,
                            fileList: [],
                            status: false,
                            forward: '省委',
                            description: '第二步',
                            handler: '市委',
                            date: new Date(2020, 8, 2),
                        },
                    ],
                },
                {
                    key: 3,
                    status: 2,
                    source: '线上',
                    text: '测试报事',
                    reporter: '我',
                    affairDate: new Date(),
                    affairDescription: '测试描述',
                    handler: '超级管理员',
                    handleDate: new Date(),
                    result: '测试结果',
                    returnVisitDate: new Date(),
                    rate: 4,
                    returnVisitDescription: '非常棒',
                    returnVisitFileList: [
                        {
                            uid: 9,
                            name: 'favicon.ico',
                            status: 'done',
                            url: '/favicon.ico',
                        },
                    ],
                    fileList: [],
                    handle: [
                        {
                            key: 1,
                            fileList: [],
                            status: false,
                            forward: '省委',
                            description: '第二步',
                            handler: '市委',
                            date: new Date(2020, 8, 2),
                        },
                    ],
                },
                {
                    key: 4,
                    status: 3,
                    source: '线上',
                    text: '测试报事',
                    reporter: '我',
                    affairDate: new Date(),
                    affairDescription: '测试描述',
                    handler: '超级管理员',
                    handleDate: new Date(),
                    result: '测试结果',
                    returnVisitDate: new Date(),
                    rate: 4,
                    returnVisitDescription: '非常棒',
                    returnVisitFileList: [
                        {
                            uid: 10,
                            name: 'index.html',
                            status: 'done',
                            url: '/index.html',
                        },
                    ],
                    fileList: [],
                    handle: [
                        {
                            key: 1,
                            fileList: [],
                            status: false,
                            forward: '省委',
                            description: '第二步',
                            handler: '市委',
                            date: new Date(2020, 8, 2),
                        },
                    ],
                },
                {
                    key: 5,
                    status: 4,
                    source: '线上',
                    text: '测试报事',
                    reporter: '我',
                    affairDate: new Date(),
                    affairDescription: '测试描述',
                    handler: '超级管理员',
                    handleDate: new Date(),
                    result: '测试结果',
                    returnVisitDate: new Date(),
                    rate: 4,
                    returnVisitDescription: '非常棒',
                    fileList: [
                        {
                            uid: 11,
                            name: 'index.html',
                            status: 'done',
                            url: '/index.html',
                        },
                    ],
                    handle: [
                        {
                            key: 1,
                            fileList: [{
                                uid: 12,
                                name: 'logo.png',
                                status: 'done',
                                url: '/logo.png',
                            }],
                            status: false,
                            forward: '市委',
                            description: '第一步',
                            handler: '区委',
                            date: new Date(2020, 8, 1),
                        },
                        {
                            key: 2,
                            fileList: [],
                            status: false,
                            forward: '省委',
                            description: '第二步',
                            handler: '市委',
                            date: new Date(2020, 8, 2),
                        },
                        {
                            key: 3,
                            fileList: [{
                                uid: 13,
                                name: 'logo.png',
                                status: 'done',
                                url: '/logo.png',
                            }],
                            status: true,
                            forward: '中央',
                            description: '第三步',
                            handler: '省委',
                            date: new Date(2020, 8, 3),
                        }
                    ],
                },
            ],
        }),
        methods: {
            query() {
                this.queryLoading = true;
            },
            onChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            addAffair() {
                this.addConfirmLoading = true;
            },
            showAddAffair() {
                this.showAdd = true;
            },
            deleteAffair() {
                this.spinning = true;
            },
            showAddObject() {
                this.showAdd = false;
                this.showObjects = true;
            },
            showAffair(index) {
                this.showDetail = true;
                this.detail.source = this.data[index].source;
                this.detail.text = this.data[index].text;
                this.detail.reporter = this.data[index].reporter;
                this.detail.affairDate = this.data[index].affairDate;
                this.detail.affairDescription = this.data[index].affairDescription;
                this.detail.handler = this.data[index].handler;
                this.detail.fileList.length = 0;
                for (const x of this.data[index].fileList) {
                    this.detail.fileList.push(x);
                }
                this.detail.returnVisitDate = this.data[index].returnVisitDate;
                this.detail.rate = this.data[index].rate;
                this.detail.returnVisitDescription = this.data[index].returnVisitDescription;
                this.detail.returnVisitFileList.length = 0;
                if (typeof this.data[index].returnVisitFileList === 'object') {
                    for (const x of this.data[index].returnVisitFileList) {
                        this.detail.returnVisitFileList.push(x);
                    }
                }
                this.detail.handle.length = 0;
                if (typeof this.data[index].handle === 'object') {
                    for (const x of this.data[index].handle) {
                        this.detail.handle.push(x);
                    }
                }
            },
            onObjectChange(selectedRowKeys) {
                this.objectSelectedRowKeys = selectedRowKeys;
            },
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$emit('route');
            });
        }
    }
</script>

<style scoped>
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>
